<template>
    <h2 style="text-align:center;">出库总列表</h2>
    <br>
    <el-button type="danger" @click="deleteOutR()">删除</el-button>
    <el-button type="success" @click="UpdateOutR()">修改</el-button>
    <br>
    <br>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出库类别">
            <el-select v-model="formInline.OROutType" placeholder="请选择" clearable style="width: 120px">
                <el-option label="销售出库" value="销售出库" />
                <el-option label="调拨出库" value="调拨出库" />
                <el-option label="物料出库" value="物料出库" />
            </el-select>
        </el-form-item>
        <el-form-item label="申请开始日期">
            <el-input type="date" v-model="formInline.ORapplicationDatebegin" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="申请结束日期">
            <el-input type="date" v-model="formInline.ORapplicationDateover" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getProData()">查询</el-button>
        </el-form-item>
    </el-form>
    <br>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="outboundNumber" label="编号" />
        <el-table-column prop="orOutType" label="出库类别" />
        <el-table-column prop="oRapplicationPeople" label="申请人员" />
        <el-table-column prop="oRapplicationDate" label="申请时间" />
        <el-table-column prop="mName" label="客户" />
        <el-table-column prop="orIsState" label="出库状态">
            <template v-slot="scop">
                <span v-if="scop.row.orIsState == 1" style="color: red">未出库</span>
                <span v-if="scop.row.orIsState == 2" style="color: green">已出库</span>
                <span v-if="scop.row.orIsState == 3" style="color: blue">部分出库</span>
            </template>
        </el-table-column>
        <el-table-column  label="操作" width="215">
            <template v-slot="scop" >
                <el-button type="primary" v-if="scop.row.orIsState == 1 || scop.row.orIsState == 3"
                    @click="outOk(scop.row.outboundRequestId)" >确认出库</el-button>
                    <el-button type="success" @click="lookOut(scop.row.outboundRequestId)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                    :total="page.pagecount">
                    ，当前是{{ page.pageindex }}/{{ page.totalcount }}页，每页{{ page.pagesize }}条
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                    :total="page.pagecount">
                    <el-button :disabled="page.pageindex == 1" @click="page.pageindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                    :total="page.pagecount">
                    <el-button :disabled="page.pageindex == page.totalcount"
                        @click="page.pageindex = page.totalcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import http from '../../http.js';
import axios from 'axios';
import router from '@/router/index.js';


onMounted(() => {
    getProData()
})

// 分页参数
const page = reactive({
    pageindex: 1,
    pagesize: 5,
    pagecount: 0,
    totalcount: 0
})

watch(page,() => {
    getProData() 
})

// 查询条件
const formInline = reactive({
    OROutType: '',
    ORapplicationDatebegin: '',
    ORapplicationDateover: ''
})

// 显示
const tableData = ref([])
const getProData = () => {
    axios.get(http.zblnb + "/erpck/api/OutboundShipments/ProcureEnquiryShow", {
        params: {
            pageindex: page.pageindex,
            pagesize: page.pagesize,
            OROutType: formInline.OROutType,
            ORapplicationDatebegin: formInline.ORapplicationDatebegin,
            ORapplicationDateover: formInline.ORapplicationDateover
        }
    })
        .then((res) => {
            tableData.value = res.data.data.list
            page.pagecount = res.data.data.pagecount
            page.totalcount = res.data.data.totalcount
        })
}

//删除用id数组
const ids = ref([])
// 显示多选框
const handleSelectionChange = (val: any) => {
    ids.value = val.map((item: any) => item.outboundRequestId)
}

//删除
const deleteOutR = () => {
    if (ids.value.length == 0) {
        ElMessage.error("请选择要删除的数据")
        return
    } else {
        //提示是否确认删除
        ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let newids = {
                "ids": ids.value,
                "delName": "string"
            }
            axios.post(http.zblnb + "/erpck/api/OutboundShipments/ProcureEnquiryDelete", newids)
                .then(res => {
                    if (res.data.data == 1) {
                        ElMessage.success("删除成功")
                        getProData()
                    } else {
                        ElMessage.error("删除失败")
                    }
                })
        })
    }
}

//修改
const UpdateOutR = () => {
    if (ids.value.length == 0) {
        ElMessage.error("请选择要修改的数据")
        return
    } else if (ids.value.length > 1) {
        ElMessage.error("只能选择一条数据")
        return
    } else {
        router.push({
            path: '/OutboundRequestUpdate',
            query: {
                id: ids.value[0]
            }
        })
    }
}

const outOk = (id: number) => {
    router.push({
        name: 'OutboundRequestOkCreate',
        query: {
            id: id
        }
    })
}

const lookOut = (id: number) => {
    router.push({
        name: 'OutboundRequestOkLook',
        query: {
            id: id
        }
    })
}
</script>

<style></style>